<template>
  <div class="footer">
    <h1>我是Footer</h1>

    <p>Count的值是{{ count }}</p>
   

    <h3>电影长度是{{movieList.length}}</h3>
    <h2>电影列表 <button @click="getMovieListRequest">获取</button></h2>
    <ul>
      <li v-for="item in movieList" :key="item.tvId">{{ item.albumName }}</li>
    </ul> 
    
  </div>
</template>

<script>
import {mapActions, mapState} from "vuex"
export default {
  name: "Footer",

  computed:{
    //计算属性拿到state中count movieList的值
    ...mapState(["count" , "movieList"]),
  },

  methods:{
    //发送请求异步修改数据
    ...mapActions(["getMovieListRequest"])
  }

};
</script>

<style scoped>
.footer {
  margin: 30px;
  background: deepskyblue;
  text-align: center;
}
</style>